<template>
    <div class="wrapper purchase">
        <mt-header title="购买会员" mtClass="no-bg"/>
        <div class="content">
            <div class="card">
                <div class="img">
                    <img :src="`static/level-${curGrade.grade}.png`">
                    <div class="imgText">
                        <div class="level">{{curGrade.name}}</div>
                        <div class="bottom">
                            <div class="number">{{curGrade.price | filterToThousands}}</div>
                            <div class="time">有效期{{curGrade.validity}}个月</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="desc" :class="`index-${curGrade.grade}`">
                <div class="panel">
                    <div class="panel-item">
                        <div class="inner">
                            <div class="left">
                                <span><img :src="`static/level-${curGrade.grade}-1.png`" alt=""></span>
                            </div>
                            <div class="right">
                                <div>阅读收益</div>
                                <div>提升至普通会员{{curGrade.multiple}}倍</div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-item">
                        <div class="inner">
                            <div class="left">
                                <span><img :src="`static/level-${curGrade.grade}-2.png`" alt=""></span>
                            </div>
                            <div class="right">
                                <div>分成奖励</div>
                                <div>享好友阅读收益{{curGrade.readDivide}}%</div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-item">
                        <div class="inner">
                            <div class="left">
                                <span><img :src="`static/level-${curGrade.grade}-3.png`" alt=""></span>
                            </div>
                            <div class="right">
                                <div>好友购买</div>
                                <div>享{{curGrade.invitationNumber}}个好友购买金额的{{curGrade.buyDivide}}%奖励</div>
                            </div>
                        </div>
                    </div>
                    <div class="panel-item">
                        <div class="inner">
                            <div class="left">
                                <span><img :src="`static/level-${curGrade.grade}-4.png`" alt=""></span>
                            </div>
                            <div class="right">
                                <div>其他收益</div>
                                <div>敬请期待</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="default-btn">
                <mt-button type="primary" size="large" @click.native="clickBtn" :disabled="myLevel>curLevel?true:false">
                    <span v-if="myLevel=='0'">确定购买</span>
                    <span v-else>
                        {{ myLevel>curLevel?'确定购买':'立即续费' }}
                    </span>
                </mt-button>
            </div>
        </div>
        <div class="mask" :class="{'maskpop':show}"></div>
        <div class="keyboard" :class="{'trans':show}">
            <div class="panel">
                <div class="header">
                    <div class="inner">
                        <div class="left" @click="show=false">
                            <i class="mintui mintui-back"></i>
                        </div>
                        <div class="title">
                            <span>请输入支付密码</span>
                        </div>
                        <div class="right"></div>
                    </div>
                </div>
                <div class="middle">
                    <div class="title">所需支付(RB)</div>
                    <div class="number">{{curGrade.price | filterToThousands}}</div>
                    <div class="text">请输入6位支付密码</div>
                    <div class="pwd">
                        <inputPayPwd title="" :key="childKey" @sendValueToParent="getPwdFromChild"></inputPayPwd>
                    </div>
                    <div class="tips" @click="$router.push('/account/setting/editPayPwd/findPayPwd')">忘记密码</div>
                </div>
            </div>
        </div>
        <div class="modal" v-show="showModal">
            <div class="inner">
                <span class="off" @click="showModal=false">×</span>
                <div class="info">
                    <div class="img" :class="{'animate':showModal}" v-show="showModal">
                        <img :src="success?'static/success.png':'static/error.png'" class="img-0">
                        <img :src="success?'static/success-1.png':'static/error-1.png'" class="img-1">
                        <img :src="success?'static/success-2.png':'static/error-2.png'" class="img-2">
                        <img :src="success?'static/success-3.png':'static/error-3.png'" class="img-3">
                    </div>
                    <div class="text">购买{{success?'成功':'失败'}}</div>
                    <div class="validityFormat" v-show="success">有效期限：{{validityFormat}}</div>
                    <div class="msg">{{tips}}</div>
                    <div class="btn" @click="$router.push('/account/wallet/recharge')" v-if="btnText=='立即充值'"><span>立即充值</span></div>
                    <div class="btn" @click="showModal=false" v-else><span>我知道了</span></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { MessageBox, Toast } from 'mint-ui';
import { mapActions } from 'vuex'
import mtHeader from "@/components/Header"
import { BuyGrade } from '@/api/api'
import cache from '@/utils/cache'
import inputPayPwd from "@/components/InputPayPwd/index"
import { toThousands } from '@/utils/index'
export default {
  data() {
    return {
        gradeList:[
            {
                id: 2,                //id
                grade: '1',           //等级
                name: "青铜发动机",    //等级名称
                price: 2500,         //价格
                validity: 4,          //有效期
                multiple: 3,          //阅读倍数
                readDivide:20,         //下线阅读分成(百分比)
                invitationNumber: 5,  //邀请码数量
                buyDivide: 20         //下线购买奖励(百分比)
            },
            {
                id: 3,                //id
                grade: '2',           //等级
                name: "白银发动机",    //等级名称
                price: 5000,         //价格
                validity: 6,          //有效期
                multiple: 6,          //阅读倍数
                readDivide:20,         //下线阅读分成(百分比)
                invitationNumber: 10,  //邀请码数量
                buyDivide: 20         //下线购买奖励(百分比)
            },
            {
                id: 4,                //id
                grade: '3',           //等级
                name: "黄金发动机",    //等级名称
                price: 10000,         //价格
                validity: 8,          //有效期
                multiple: 12,          //阅读倍数
                readDivide:20,         //下线阅读分成(百分比)
                invitationNumber: 20,  //邀请码数量
                buyDivide: 20         //下线购买奖励(百分比)
            }
        ],
        myLevel: '',
        curLevel: '',
        show: false,
        showModal: false,
        success: true,
        btnText: '我知道了',
        curGrade:{},
        tips: '',
        validityFormat: '',
        payPassword: '0',
        childKey:1
    }
  },
  components:{
    mtHeader,
    inputPayPwd
  },
  filters:{
    filterToThousands(num){
       return toThousands(num)
    }
  },
  activated(){
    this.show = false
    this.curLevel = this.$route.query.level
    this.init()
  },
  methods: {
    ...mapActions('user', [
        'get_userInfo_cache',
        'get_userInfo_data'
    ]),
    init(){
        // 用户信息的缓存？缓存 : 发送请求
        this.get_userInfo_cache()
        .then(res => {
            if (res) {
                this.payPassword = res.payPassword
                this.myLevel = res.userGrade
                this.curGrade = this.gradeList[this.curLevel-1]
            } else {
                this.get_userInfo_data().then(res => {
                    this.payPassword = res.payPassword
                    this.myLevel = res.userGrade
                    this.curGrade = this.gradeList[this.curLevel-1]
                })
            }
        })
    },
    clickBtn(){
        // 判断是否有设置支付密码
        if( this.payPassword == '1'){  
            Toast({
                message: '请先设置支付密码'
            });
            return false;
        }
        this.show = true
    },
    confirmPurchase(value){
        BuyGrade({
            gradeId: this.curGrade.id,
            payPassword: value
        }).then(res => {
            if( res.code == 200 ){
                this.show = false;
                this.showModal = true
                this.validityFormat = res.data.validityFormat
                this.tips = `您已成功开启${this.curGrade.name}，快去挖矿吧!`
                this.success = true
                this.btnText = '我知道了'
            }else if( res.code == 5002 ){
                // 支付密码错误
                MessageBox({
                    title:'',
                    message: '支付密码不正确',
                    closeOnClickModal:true,
                    showCancelButton:true,
                    confirmButtonText: '忘记密码', 
                    cancelButtonText: '重新输入' 
                }).then(action => {
                    if (action == 'confirm') {   //确认的回调--忘记密码
                        this.$router.push('/account/setting/editPayPwd/findPayPwd')
                    }else{                       //取消的回调--重新输入
                        console.log('取消的回调'); 
                    }
                });
            }else if( res.code == 5001 ){
                // 锁仓数量不足
                this.show = false;
                this.showModal = true
                this.tips = '您的锁仓数量不足，快去充值吧！';
                this.success = false
                this.btnText = '立即充值'
            }else{
                this.show = false;
                this.showModal = true
                this.tips = res.msg
                this.success = false
                this.btnText = '我知道了'
            }
            this.childKey++
        })
    },
    getPwdFromChild(value){
        if( value.length == 6 ){
            this.confirmPurchase(value)
        }
    }
  }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    height:100%;
    overflow:hidden;
    .content{
        height:100%;
        padding-top:60px;
        padding-bottom:30px;
        overflow:scroll;
        /*解决ios上滑动不流畅*/
        -webkit-overflow-scrolling: touch;
        .card{
            margin:0 15px;
            .img{
                display: block;
                position:relative;
                img{
                    border-radius: 5px;
                }
                .imgText{
                    color:#fff;
                    position:absolute;
                    top:16%;
                    left:10%;
                    height:65%;
                    .level{
                        font-size:26px;
                    }
                    .bottom{
                        position:absolute;
                        bottom:3%;
                        left:0;
                        .number{
                            position:relative;
                            padding-left:25px;
                            font-size:30px;
                            &:before{
                                content: '';
                                display:inline-block;
                                width:20px;
                                height:20px;
                                position:absolute;
                                top:50%;
                                left:0;
                                transform:translateY(-50%);
                                background:url(../../../assets/coin.png) no-repeat 0 0;
                                background-size:100% 100%;
                            }
                        }
                        .time{
                            font-size:16px;
                        }
                    }
                }
            }
        }
        .desc{
            padding: 25px 15px 10px 15px;
            .panel{
                display:flex;
                flex-wrap: wrap;
                .panel-item{
                    width: 48.5%;
                    height:75px;
                    border-radius:5px;
                    margin-bottom:10px;
                    position:relative;
                    &:nth-child(even){
                        margin-left:3%;
                    }
                    .inner{
                        position:absolute;
                        top:50%;
                        transform:translateY(-50%);
                        .left{
                            width:40px;
                            height:40px;
                            position:absolute;
                            top:50%;
                            left:5px;
                            transform:translateY(-50%);
                            span{
                                display:inline-block;
                                width:40px;
                                height:40px;
                                border-radius:50%;
                                img{
                                    vertical-align:middle;
                                    width:24px;
                                    height:24px;
                                    position:absolute;
                                    top:50%;
                                    left:50%;
                                    transform:translate(-50%,-50%);
                                }
                            }
                        }
                        .right{
                            padding-left:50px;
                            padding-right:5px;
                            div{
                                font-size:15px;
                                color:#333333;
                                &:last-child{
                                    font-size:12px;
                                    color:#666666;
                                    margin-top:5px;
                                }
                            }
                        }
                    }
                }
            }
            .default-btn{
                margin-top:40px;
            }
            &.index-1{
                .panel{
                    .panel-item{
                        box-shadow:0px 1px 4px 0px rgba(247,176,156,0.6);
                        .left{
                            span{
                                background: #FFF5F0;
                            }
                        }
                    }
                }
            }
            &.index-2{
                .panel{
                    .panel-item{
                        box-shadow:0px 1px 4px 0px rgba(93,134,169,0.6);
                        .left{
                            span{
                                background: #F1F9FF;
                            }
                        }
                    }
                }
            }
            &.index-3{
                .panel{
                    .panel-item{
                        box-shadow:0px 1px 4px 0px rgba(245,172,54,0.6);
                        .left{
                            span{
                                background: #FFF8E9;
                            }
                        }
                    }
                }
            }
            &.index-4{
                .panel{
                    .panel-item{
                        box-shadow:0px 1px 4px 0px rgba(82,94,108,0.6);
                        .left{
                            span{
                                background: #F3F4F5;
                            }
                        }
                    }
                }
            }
            &.index-5{
                .panel{
                    .panel-item{
                        box-shadow:0px 1px 4px 0px rgba(65,84,137,0.6);
                        .left{
                            span{
                                background: #EFF3FF;
                            }
                        }
                    }
                }
            }
            &.index-6{
                .panel{
                    .panel-item{
                        box-shadow:0px 1px 4px 0px rgba(195,164,255,0.6);
                        .left{
                            span{
                                background: #F8F5FF;
                            }
                        }
                    }
                }
            }
        }
        .default-btn{
            position:absolute;
            bottom:30px;
        }
    }
    .modal{
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        left:0;
        background:rgba(26,26,26,0.6);
        z-index: 3;
        .inner{
            width:80%;
            background:#fff;
            border-radius:5px;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
            .off{
                display:inline-block;
                color:#CDCDCD;
                font-size:30px;
                position:absolute;
                top:0px;
                right:10px;
            }
            .info{
                text-align:center;
                .img{
                    width:100px;
                    height:100px;
                    margin:40px auto 25px;
                    position:relative;
                    overflow: hidden;
                    .img-0{
                        width:70px;
                        height:86px;
                        position:absolute;
                        top:100px;
                        left:15px;
                    }
                    .img-1{
                        width:4px;
                        height:9px;
                        position:absolute;
                        top:-50px;
                        right:-10px;
                    }
                    .img-2{
                        width:8px;
                        height:8px;
                        position:absolute;
                        top:-50px;
                        right:-10px;
                    }
                    .img-3{
                        width:10px;
                        height:6px;
                        position:absolute;
                        top:-50px;
                        right:-10px;
                    }
                    &.animate{
                        .img-0{
                            animation:fadeInUpBig 0.5s;
                            animation-fill-mode: forwards;
                        }
                        .img-1{
                            animation:fadeIn1 0.2s 0.5s;
                            animation-fill-mode: forwards;
                        }
                        .img-2{
                            animation:fadeIn2 0.2s 0.7s;
                            animation-fill-mode: forwards;
                        }
                        .img-3{
                            animation:fadeIn3 0.2s 0.9s;
                            animation-fill-mode: forwards;
                        }
                    }
                }
                .text{
                    font-size:18px;
                    color:#333;
                    margin-bottom:15px;
                }
                .validityFormat{
                    color:#5F88FF;
                    margin-bottom:10px;
                    padding: 0 15px;
                }
                .msg{
                    font-size:14px;
                    color:#848484;
                }
                .btn{
                    width:155px;
                    height:45px;
                    line-height:45px;
                    background:rgba(95,136,255,1);
                    border-radius:23px;
                    color:#fff;
                    margin:35px auto;
                    position:relative;
                    span{
                        width: 100%;
                        position:absolute;
                        top:50%;
                        left:50%;
                        transform:translate(-50%,-50%);
                        font-size:15px;
                    }
                }
            }
        }
    }
    .mask{
        background-color: rgba(0,0,0,.5);
        position: fixed;
        bottom: 0;
        left: 0;
        top: 0;
        right: 0;
        opacity: 0;
        will-change: opacity;
        transition: all 0.5s;
        visibility: hidden;
        z-index:3;
        &.maskpop{
            pointer-events: auto;
            opacity: 1;
            visibility: visible;
        }
    }
    .keyboard{
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        z-index:3;
        transform: translate3d(0,100%,0);
        will-change: transform;
        transition: transform .3s cubic-bezier(0,0,.25,1) 80ms;
        &.trans{
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
        .panel{
            background:#fff;
            position:absolute;
            bottom:0;
            left:0;
            right:0;
            .header{
                height:50px;
                color: #333;
                font-size: 14px;
                position:relative;
                border-bottom: 1px solid #f4f5fa;
                .inner{
                    position: absolute;
                    width:100%;
                    padding: 0 15px;
                    top:50%;
                    left:50%;
                    transform:translate(-50%,-50%);
                    display: flex;
                    .left{
                        text-align: left;
                        flex: .5;
                        position:relative;
                        .mintui-back{
                            font-size:20px;
                            position: absolute;
                            top:50%;
                            left:0;
                            transform:translateY(-50%);
                        }
                    }
                    .title{
                        flex: 1;
                        font-size:18px;
                        text-align:center;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .right{
                        flex: .5;
                    }
                }
            }
            .middle{
                padding:0 15px;
                .title{
                    margin:20px 0 10px 0;
                }
                .number{
                    font-size:30px;
                    font-weight:bold;
                    margin-bottom:30px;
                    text-align:center;
                }
                .pwd{
                    margin-top:-20px;
                }
                .text{
                    color:#BFBFBF;
                }
                .tips{
                    color:#5F88FF;
                    text-align:right;
                    margin-top:0;
                    margin-bottom:50px;
                }
            }
        }
    }
}
@keyframes fadeInUpBig {
    0%   {top:100px;}
    50%  {top:0px;}
    80%  {top:30px;} 
    100% {top:14px;}
}
@keyframes fadeIn1 {
    0%   {right:-10px;top:-50px;}
    100% {right:20px;top:5px;}
}
@keyframes fadeIn2 {
    0%   {right:-10px;top:-50px;}
    100% {right:10px;top:10px;}
}
@keyframes fadeIn3 {
    0%   {right:-10px;top:-50px;}
    100% {right:5px;top:20px;}
}
</style>
